<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 
        记事本功能实现
            1.列表渲染
                v-for key的值：item.id  {{item.id}} {{item.des}}
            2.删除功能
                @click="del(item.id)"  过滤与这个id不同的元素添加到新数组赋值给 list
            3.添加功能
                v-model 双向绑定  获取里面的值  用unshift()添加到数组前面
            4.底部统计和清空
                判断数组的长度是否大于0  v-show用于频繁切换
    -->
    <div id="app">
        <div class="notepad">
            <header>
                <h1 class="title">小黑记事本</h1>
            </header>
            <main class="main">
                <div class="publish">
                    <input type="text" v-model="value" @keyup.enter="add()">
                    <button @click="add()" class="add">添加任务</button>
                </div>

                <ul class="dsc-list">
                    <li class="item" v-for="(item,index) in list" :key="item.id">
                        <div class="left">
                            <span>{{index+1}}.</span>
                            <span>{{item.des}}</span>
                        </div>
                        <span @click="del(item.id)" class="del">x</span>
                    </li>
                </ul>
                <div v-show="list.length>0" class="footer">
                    <p>合计：<span>{{list.length}}</span></p>
                    <button @click="clear()">清空任务</button>
                </div>
            </main>
        </div>
    </div>

    <script src="../script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                value: '',
                list: [
                    { id: 1, des: '跑步' },
                    { id: 2, des: '健身' }
                ]
            },
            methods: {
                // 删除
                del(id) {
                    // 获取id
                    // console.log(this.list.filter(item => item.id !== id));
                    // filter过滤 不一样的id  返回一个新的数组
                    this.list = this.list.filter(item => item.id !== id)
                },
                // 添加
                add() {
                    if (this.value.trim() === '') {
                        alert('不能为空~~请您去输入');
                        return
                    }
                    this.list.unshift({
                        id: +new Date(),
                        des: this.value
                    })
                    // 添加完成清空输入框
                    this.value = ''
                },
                // 清空
                clear() {
                    this.list = [];
                }
            },
        })
    </script>
</body>

</html>